<template>
  <div id="box">
    <div id="container">
      <el-form
        :model="loginForm"
        status-icon
        :rules="rules"
        ref="loginForm"
        label-width="100px"
        class="login-loginForm"
      >
        <!-- 一开始是二维码角标,点击之后变成电脑角标,再次点击又切换 -->

        <h1 class="title">世纪佳缘相亲交友</h1>

        <i
          :class="['jiaobiao', 'iconfont', jiaobiaoType]"
          @click="changeLoginType"
        ></i>
        <commonlogin
          ref="commonlogin"
          @syncLoginForm="handleSyncLoginForm"
          @submit="submit"
          v-if="loginType === 'common'"
          @changeSmsType="changeSmsType"
        ></commonlogin>
        <!-- 二维码组件 -->
        <qrlogin
          :storageUserInfo="storageUserInfo"
          v-else-if="loginType === 'qrlogin'"
        ></qrlogin>
        <!-- 验证码组件 -->
        <smsLogin :storageUserInfo="storageUserInfo" v-else></smsLogin>
      </el-form>
    </div>
    <img
      src="https://img.zcool.cn/community/03784eb59391d19a8012193a342bae4.jpg"
      alt=""
    />
  </div>
</template>
<script>
import commonlogin from "../../components/Login/commonlogin.vue";
import qrlogin from "../../components/Login/qrlogin.vue";
import smsLogin from "../../components/Login/smslogin.vue";
import * as api from "../../api/users";
import storage from "../../utils/storage";
//校验验证码
var validateCaptcha = (rule, value, callback) => {
  var uPatt = /^[a-zA-Z0-9_-]{3,16}$/;
  if (uPatt.test(value)) {
    callback();
  } else {
    callback("请您输入5位");
  }
};
//   校验用户名
var validateUsername = (rule, value, callback) => {
  // console.log(rule);
  // console.log(value);
  var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("3-16字母数字下划线");
  }
};
//校验密码
var validatePassword = (rule, value, callback) => {
  if (value) {
    callback();
  } else {
    callback("请输入密码");
  }
};

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        captcha: "",
      },
      loginType: "common",
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  computed: {
    jiaobiaoType() {
      if (this.loginType === "qrlogin" || this.loginType === "smslogin") {
        return "icon-diannaojiaobiao";
      }
      if (this.loginType === "common") {
        return "icon-erweimajiaobiao";
      }
    },
  },
  methods: {
    //更改短信验证页面
    changeSmsType() {
      this.loginType = "smslogin";
    },
    // 更改登入方式
    changeLoginType() {
      if (this.loginType === "common") {
        this.loginType = "qrlogin";
      } else if (this.loginType === "qrlogin") {
        this.loginType = "common";
      } else {
        this.loginType = "common";
      }
    },
    // 父组件事件子组件来触发,达到子传父
    handleSyncLoginForm(newLoginForm) {
      // console.log(newLoginForm);
      this.loginForm = newLoginForm;
    },
    submit() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          api.verifyCaptcha(this.loginForm.captcha).then(async (res) => {
            if (res.data.state) {
              let { username, password } = this.loginForm;
              let res = await api.loginApi(username, password);
              // console.log(res);
              if (res.data.state) {
                //存储信息到主页
                this.storageUserInfo(res.data);
                this.$router.push("/");
              }
            } else {
              this.$refs["commonlogin"].getCaptcha();
            }
          });

          // alert('submit!');
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      // console.log(this.$refs);
    },
    //封装一个方法用于存储用户信息,和token
    storageUserInfo({ userInfo, token, permission }) {
      //将信息存到vuex
      this.$store.commit("users/SET_USERINFO", userInfo);
      storage.set("userInfo", userInfo);
      storage.set("qf-token", token);
      storage.set("permission", permission);
    },
  },
  components: {
    commonlogin,
    qrlogin,
    smsLogin,
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-input {
  .el-input__inner {
    width: 300px;
  }
}
#container {
  position: fixed;
  top: 200px;
  right: 200px;
  z-index: 1;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  width: 400px;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.3);
  padding-right: 60px;
  padding-top: 100px;
}
img {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
h1 {
  margin-left: 90px;
}
.el-button--primary {
  margin-left: 200px !important;
}
.jiaobiao {
  font-size: 60px !important;
  color: white;
  position: absolute;
  right: -1px;
  top: -1px;
  cursor: pointer;
  opacity: 0.7;
}
/deep/.el-button {
  margin-left: 100px !important;
}
</style>
